<template>
  <div class="operationRoom">
    <div class="content">
      <div class="streaming" v-for="(item,index) in onlineList" :key="index" @click="liveMessage(item)">
        <div class="one">
          <img v-if="item.isOpen == 1" src="../../../../images/live/3-1live.jpg" alt="" />
          <img v-if="item.isOpen == 0" src="../../../../images/live/3-1livee.jpg" alt="" />
        </div>
        <div class="two">
          <span>{{item.nodeName}}</span>
        </div>
      </div>
    </div>
    <div :class="mainPart_paging">
      <a-pagination
        @change="pagingChange"
        v-model="current"
        :total="totalCount"
        :defaultPageSize="8"
      />
    </div>
  </div>
</template>

<script>
import api from "../../../api/live/live.js";
export default {
  data() {
    return {
      current: 1,
      totalCount: null,
      mainPart_paging:'mainPart_paging',
      onlineList:[]
    };
  },
  mounted(){
    let _this = this;
    // console.log(JSON.parse(sessionStorage.getItem('liveData')))
    this.getOnlineList(this.current)
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.mainPart_paging='mainPart_paging';
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.mainPart_paging='mainPart_paging1';
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem('menuLeft')
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.mainPart_paging='mainPart_paging';
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.mainPart_paging='mainPart_paging1';
    }
  },
  methods: {
    pagingChange(page, pageSize) {
      this.current = page;
      this.getOnlineList(this.current)
    },
    getOnlineList(current){
      let _this = this;
      api.getOnlineList(null,{pageSize:8,pageNum:current}).then(res=>{
        if(res.code == 200) {
          _this.totalCount = res.data.totalCount
          _this.pageNum = res.data.pageNum
          _this.onlineList = res.data.data;
        }
      })
    },
    liveMessage(item) {
      this.$router.push({
          path: "/liveMessage",
          query: {
            id:item.id
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.operationRoom {
  position: relative;
  width: 100%;
  .content {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .streaming {
      width: 367px;
      height: 400px;
      border-radius: 10px;
      margin-left: 30px;
      position: relative;
      margin-bottom: 30px;
      cursor: pointer;
      .one {
        img {
          width: 367px;
          height: 400px;
          border-radius: 10px;
        }
      }
      
      .two {
        position: absolute;
        top: 0;
        left: 0;
        width: 367px;
        height: 30px;
        background-color: rgba(52, 63, 75, 0.7);
        border-radius: 10px 10px 0px 0px;
        span {
          font-size: 18px;
          color: #ffffff;
          line-height: 30px;
        }
      }
    }
    
  }
  .mainPart_paging,.mainPart_paging1 {
    width: 100%;
    padding-bottom: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>

<style>
.operationRoom .mainPart_paging .ant-pagination-prev .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-left-initial.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging1 .ant-pagination-prev .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-left-initial1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging .ant-pagination-prev .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-left-XF.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging1 .ant-pagination-prev .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-left-XF1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging .ant-pagination-next .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-right-initial.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging1 .ant-pagination-next .ant-pagination-item-link {
  border: none !important;
  background: none !important;
  background-image: url(../../../../images/home-showAll/pagin-right-initial1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging .ant-pagination-next .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-right-XF.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging1 .ant-pagination-next .ant-pagination-item-link:hover {
  background-image: url(../../../../images/home-showAll/pagin-right-XF1.png) !important;
  background-size: cover !important;
  background-size: 100% 100% !important;
}
.operationRoom .mainPart_paging .ant-pagination-item,
.operationRoom .mainPart_paging .ant-pagination-item a,
.operationRoom .mainPart_paging1 .ant-pagination-item,
.operationRoom .mainPart_paging1 .ant-pagination-item a {
  background-color: none !important;
  border-radius: 50% !important;
  border: none !important;
}
.operationRoom .mainPart_paging .ant-pagination-item,
.operationRoom .mainPart_paging1 .ant-pagination-item{
  background: none !important;
}
.operationRoom .mainPart_paging .ant-pagination-item a,
.operationRoom .mainPart_paging1 .ant-pagination-item a {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  color: #5d77ad !important;
}
.operationRoom .mainPart_paging .ant-pagination-item-active,
.operationRoom .mainPart_paging .ant-pagination-item-active a {
  background-color: #5d77ad !important;
  color: #fff !important;
}
.operationRoom .mainPart_paging1 .ant-pagination-item-active,
.operationRoom .mainPart_paging1 .ant-pagination-item-active a {
  background-color: #2091bd !important;
  color: #fff !important;
}
.operationRoom .mainPart_paging .anticon,
.operationRoom .mainPart_paging1 .anticon {
  display: none !important;
}
</style>